<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2018/12/18
  Time: 9:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>供货商</title>
    <style type="text/css">
        #myditu{height:550px;width: 550px;}
    </style>
    <jsp:include page="${pageContext.request.contextPath}/common/tag.jsp"/>
    <script>
        $(function () {

            $("#addmodel").click(function () {
                $("#jiagai").val(1);
                document.getElementById("addform").reset();
                $("#addform").data('bootstrapValidator').resetForm();//清除当前验证的关键之处
                $("#id").val(1);
            })

            <!--校验框架-->
            $('#addform').bootstrapValidator({
                message: 'This value is not valid',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    gname: {
                        message: '请输入供货商名称',
                        validators: {
                            notEmpty: {
                                message: '供货商名称不能为空！'
                            }
                        }
                    },
                    contacts: {
                        message: '请输入联系人',
                        validators: {
                            notEmpty: {
                                message: '联系人不能为空！'
                            }
                        }
                    },
                    phone: {
                        message: '类型校验失败',
                        validators: {
                            notEmpty: {
                                message: '手机号码不能为空'
                            },
                            stringLength: {
                                min: 11,
                                max: 11,
                                message: '请输入11位手机号码'
                            },
                            regexp: {
                                regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                                message: '请输入正确的手机号码'
                            }

                        }
                    },
                    address: {
                        validators: {
                            notEmpty: {
                                message: '地址不能为空！'
                            }
                        }
                    }
                }
            });

            /*table表格*/
            $("#supptable").bootstrapTable({
                url : '${pageContext.request.contextPath}/supplier/query', //路径
                toolbar : '#addmodel,#plshan,#xiazai',
                pageSize : 9, //设置每页显示的行数
                pageList:[2,4,8,16], //设置可供选择的页面数据条数
                pageNumber:1, //如果设置了分页，首页页码。
                height : 610,  //表格高度
                pagination : true, //开启分页  默认情况下，是客户端分页的
                sidePagination:'server',  //启用服务器端分页
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        gname: $("#name").val(),
                        address: $("#dizhi").val()
                    };
                    return temp;
                },
                columns : [
                    {checkbox : true},
                    {field : 'id',title : '编号',align : 'center'},
                    {field : 'gname',title : '供货商名称',align : 'center'},
                    {field : 'contacts',title : '联系人',align : 'center'},
                    {field : 'phone',title : '联系电话',align : 'center'},
                    {field : 'address',title : '地址',align : 'center'},
                    {field : 'remarks',title : '备注',align : 'center'},
                    {title : '操作',align : 'center',
                        formatter : function (value,row,index) {
                            return "<button class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#myModal\" onclick='huoqu("+index+")'>修改</button>&nbsp;&nbsp;<button class=\"btn btn-primary\" data-toggle=\"modal\" href=\"#modal-id\" onclick=\"dizhi('"+row.address+"')\">位置</button>"
                        }
                    }
                ]
            }) ;
        })
    </script>
</head>
<body style="overflow-y: hidden;">
    <div style="margin: 0px 30px;">
        <form class="form-inline" style="margin-top: 20px;text-align: right">
            <div class="form-group">
                <label for="name" style="font-size: 15px;">姓名：</label>&nbsp;
                <input type="text" class="form-control" id="name" placeholder="张三" style="height: 40px;">
            </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="form-group">
                <label for="address">地址：</label>&nbsp;
                <input type="text" class="form-control" id="dizhi" placeholder="河北邯郸" style="height: 40px;">
            </div>
            <button onclick="serch();" class="btn btn-primary btn-lg" type="button"><span class="glyphicon glyphicon-search">搜索</span></button>
        </form>

        <table id="supptable"></table>
    </div>


    <div class="text-center">
        <button id="addmodel" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">添加</button>
        <button style="margin-left: 20px;" id="plshan" type="button" class="btn btn-primary" onclick="plshan()">批量删除</button>
        <a id="xiazai" style="margin-left: 20px;" class="btn btn-primary" href="${pageContext.request.contextPath}/supplier/fileDownloadByDate">
            <span class="glyphicon glyphicon-download-alt"> </span> &nbsp; 下载数据
        </a>
    </div>
    <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
                    </button>
                    <i class="fa fa-laptop modal-icon"></i>
                    <h4 class="modal-title">添加</h4>
                    <small class="font-bold">供货商</small>
                </div>
                <div class="modal-body">
                    <form id="addform" class="form-horizontal"  method="post" role="form">
                        <%--商品id--%>
                        <input type="hidden" value="0" name="id" id="id">
                        <%--得到当前页码--%>
                        <%--<input type="hidden" name="pn">--%>
                        <div class="form-group">
                            <label for="gName">供货商名称：</label>
                            <input type="text" class="form-control" name="gname" id="gName" placeholder="请输入供货商名称">
                        </div>
                        <div class="form-group">
                            <label for="contacts">联系人：</label>
                            <input type="text" class="form-control" name="contacts" id="contacts" placeholder="请输入联系人">
                        </div>
                        <div class="form-group">
                            <label for="phone">联系电话：</label>
                            <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入联系电话">
                        </div>
                        <div class="form-group">
                            <label for="address">地址：</label>
                            <input type="text" class="form-control" name="address" id="address" placeholder="请输入地址">
                        </div>
                        <div class="form-group">
                            <label for="remarks">备注：</label>
                            <textarea name="remarks" id="remarks" class="form-control"></textarea>
                        </div>
                        <input type="hidden" value="1" id="jiagai">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="addghs()">保存</button>
                </div>
            </div>
        </div>
    </div>

<%--百度地图--%>
    <div class="modal fade" id="modal-id">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">地图</h4>
                </div>
                <div class="modal-body">
                    <div id="myditu"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

</body>
<script>
    /*点击搜索*/
    function serch() {
        //返回表格的 Options。
        var opts = $("#supptable").bootstrapTable("getOptions") ;
        $("#supptable").bootstrapTable('refreshOptions',{pageNumber:1});
        var limit = opts.pageSize ;
        var offset = (opts.pageNumber-1) * limit;
        var name = $("#name").val() ;
        var address = $("#dizhi").val();
        $.post("${pageContext.request.contextPath}/supplier/serch",{'gname':name,'address':address,'limit':limit,'offset':offset},function (data) {
            // var mydata = eval("("+data+")") ;
            //重新绑定表格数据
            $("#supptable").bootstrapTable('load',data) ;
        })
    }
    function addghs() {
        var jg = $("#jiagai").val();
        /*添加*/
        if(jg == 1){
            //alert("添加");
            //开启校验
            $("#addform").data("bootstrapValidator").validate();
            //验证是否通过true/false
            var flag = $("#addform").data("bootstrapValidator").isValid() ;
            if(flag){
                //序列化表单
                var strform = $("#addform").serialize();
                //处理中文乱码
                params = decodeURIComponent(strform,true);
                //发送ajax
                //alert(params);
                $.ajax({
                    type : 'post',
                    url : '${pageContext.request.contextPath}/supplier/insert',
                    data : params,
                    success : function (data) {
                        document.getElementById("addform").reset();
                        $("#addform").data('bootstrapValidator').resetForm();//清除当前验证的关键之处
                        /*隐藏对话框*/
                        $("#myModal").modal('hide');
                        /*从新绑定表格*/
                        $("#supptable").bootstrapTable('load',data);
                        //提示增加成功
                        swal("提示信息", "增加成功!", "success");
                    }
                })
            }
        } else{
            //alert("修改");
            //开启校验
            $("#addform").data("bootstrapValidator").validate();
            //验证是否通过true/false
            var flag = $("#addform").data("bootstrapValidator").isValid() ;
            if(flag){
                //序列化表单
                var strform = $("#addform").serialize();
                //处理中文乱码
                params = decodeURIComponent(strform,true);
                //发送ajax
                //alert(params);
                $.ajax({
                    type : 'post',
                    url : '${pageContext.request.contextPath}/supplier/update',
                    data : params,
                    success : function (data) {
                        document.getElementById("addform").reset();
                        $("#addform").data('bootstrapValidator').resetForm();//清除当前验证的关键之处
                        /*隐藏对话框*/
                        $("#myModal").modal('hide');
                        /*从新绑定表格*/
                        $("#supptable").bootstrapTable('load',data);
                        //提示增加成功
                        swal("提示信息", "修改成功!", "success");
                    }
                })
            }
        }

    }
    function huoqu(index) {
        document.getElementById("addform").reset();
        $("#addform").data('bootstrapValidator').resetForm();//清除当前验证的关键之处
        //取消所有选择
        $("#supptable").bootstrapTable("uncheckAll");
        //选中要修改的行
        $("#supptable").bootstrapTable("check", index);
        $("#jiagai").val(2);
        var zhi =  $("#supptable").bootstrapTable('getSelections')[0];
        $("#id").val(zhi.id);
        $("#gName").val(zhi.gname);
        $("#contacts").val(zhi.contacts);
        $("#phone").val(zhi.phone);
        $("#address").val(zhi.address);
        $("#remarks").val(zhi.remarks);

        //console.log(zhi);
    }

    /*批量删除*/
    function plshan() {
        var option = $("#supptable").bootstrapTable("getOptions");
        var pn = option.pageNumber;
        var rows = $("#supptable").bootstrapTable("getSelections");
        /*console.log(rows);*/
        var ids = "";
        if(rows.length==0){
            //提示增加成功
            swal("提示信息", "请选择一条数据要删除的记录!", "error");
            //alert("请选择一条数据要删除的记录");
            return;
        }else{
            swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            },function () {
                $.each(rows,function () {
                    ids+=this.id+",";
                });
                $.ajax({
                    type:'post',
                    url: '${pageContext.request.contextPath}/supplier/delete',
                    data : {"ids":ids},
                    success:function (data) {
                        //从新绑定表格
                        $("#supptable").bootstrapTable('load',data);
                        //提示增加成功
                        swal("提示信息", "批量删除成功!", "success");
                    }
                });
            });
        }
    }
    
    function dizhi(dizhi) {
        var map = new BMap.Map("myditu");
        // 创建地址解析器实例
        var myGeo = new BMap.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint(dizhi, function(point){
                if (point) {
                    map.centerAndZoom(point, 16);
                    map.addOverlay(new BMap.Marker(point));

                    var opts = {
                        width : 150,     // 信息窗口宽度
                        height: 50,     // 信息窗口高度
                        //title : "地址"  // 信息窗口标题
                    };
                    var infoWindow = new BMap.InfoWindow(dizhi, opts);  // 创建信息窗口对象
                    map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息窗口
                }
            },
            "北京市");
        map.addControl(new BMap.NavigationControl());
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.addControl(new BMap.MapTypeControl());
        map.enableScrollWheelZoom(true);
    }
</script>
</html>
